<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Cairo Definitions</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="cairo, graphics, C, 2D vector library">
<meta name="description" content="In this part of the Cairo tutorial, we
provide some basic definitions.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

</head>

<body>

<div class="container">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content">

<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Cairo definitions</h1>

<p>
In this part of the Cairo graphics tutorial, we will provide some useful 
definitions for the Cairo graphics library.
This will help us better understand the Cairo drawing model.
</p>

<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* NewSquare */
google_ad_slot = "0364418177";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script>

<h2>Context</h2>

<p>
To do some drawing in Cairo, we must first create a Cairo context. The Cairo 
context holds all of the graphics state parameters that describe how drawing 
is to be done. This includes information such as line width, colour, the surface 
to draw to, and many other things. This allows the actual drawing functions to 
take fewer arguments to simplify the interface. The <code>gdk_cairo_create()</code> 
function call creates a cairo context for drawing on a GDK window. A GDK window
is one of the supported Cairo backends.
</p>

<pre class="code">
cairo_t *cr;
cr = gdk_cairo_create(gtk_widget_get_window(widget));
</pre>

<p>
These two lines create a cairo context. In this example, the context is 
tied to a <b>GdkWindow</b>. A cairo_t structure contains the current state 
of the rendering device, including coordinates of yet to be drawn shapes.
Technically speaking, the cairo_t objects are called the Cairo contexts.
</p>

<p>
All drawing with Cairo is always done to a cairo_t object. A Cairo context is 
tied to a specific surface. A PDF, SVG, PNG, GdkWindow etc.
</p>

<p>
The GDK does not wrap the Cairo API. It allows to create a Cairo context,  
which can be used to draw on GDK windows. 
</p>

<h2>Path</h2>


<p>
A path is made up of one or more lines. These lines are connected by two or 
more anchor points. Paths can be made up of straight lines and curves. There are 
two kinds of paths. Open and closed paths. In a closed path, starting and ending 
points meet. In an open path, starting and ending point do not meet. 
</p>

<p>
In Cairo, we start with an empty path. First we define a path and then we make 
them visible by stroking and filling them. One important note. After each 
<code>cairo_stroke()</code> or <code>cairo_fill()</code> 
function calls, the path is emptied. We have to define a new path. 
</p>

<p>
A path is made of subpaths.
</p>


<h2>Source</h2>

<p>
The source is the paint we use in drawing. We can compare the source to a pen 
or ink, that we will use to draw the
outlines and fill the shapes. There are four kinds of basic sources. Colors, 
gradients, patterns and images.
</p>


<h2>Surface</h2>

<p>
A surface is a destination that we are drawing to. We can render documents using 
the PDF or PostScript surfaces, directly draw to a platform via the Xlib and Win32 surfaces. 
</p>

<p>
The documentation mentions the following surfaces:
</p>

<pre class="code">
typedef enum _cairo_surface_type {
  CAIRO_SURFACE_TYPE_IMAGE,
  CAIRO_SURFACE_TYPE_PDF,
  CAIRO_SURFACE_TYPE_PS,
  CAIRO_SURFACE_TYPE_XLIB,
  CAIRO_SURFACE_TYPE_XCB,
  CAIRO_SURFACE_TYPE_GLITZ,
  CAIRO_SURFACE_TYPE_QUARTZ,
  CAIRO_SURFACE_TYPE_WIN32,
  CAIRO_SURFACE_TYPE_BEOS,
  CAIRO_SURFACE_TYPE_DIRECTFB,
  CAIRO_SURFACE_TYPE_SVG,
  CAIRO_SURFACE_TYPE_OS2
} cairo_surface_type_t;
</pre>


<h2>Mask</h2>

<p>
Before the source is applied to the surface, it is filtered first. The mask 
is used as a filter. The mask determines, where the sourse is applied and 
where not. Opaque parts of the mask allow to copy the source. Transparent parts do not
let to copy the source to the surface. 
</p>


<h2>Pattern</h2>

<p>
A cairo pattern represents a source when drawing onto a surface.
In cairo, a pattern is something that you can read from, that is used as the 
source or mask of a drawing operation. Patterns in cairo can be solid, 
surface-based or gradients patterns.
</p>

<p>
In this chapter of the Cairo tutorial, we have given some 
basic definitions. 
</p>

<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified December 12, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>


